"use client";

import {
  ArrowUpToLineIcon,
  BaselineIcon,
  BoldIcon,
  Code2Icon,
  HighlighterIcon,
  ItalicIcon,
  PaintBucketIcon,
  StrikethroughIcon,
  UnderlineIcon,
  WandSparklesIcon,
} from "lucide-react";
import { KEYS } from "platejs";
import { useEditorReadOnly } from "platejs/react";

import { AIToolbarButton } from "./ai-toolbar-button";
import { AlignToolbarButton } from "./align-toolbar-button";
import { CommentToolbarButton } from "./comment-toolbar-button";
import { EmojiToolbarButton } from "./emoji-toolbar-button";
import { ExportToolbarButton } from "./export-toolbar-button";
import { FontColorToolbarButton } from "./font-color-toolbar-button";
import { FontSizeToolbarButton } from "./font-size-toolbar-button";
import { RedoToolbarButton, UndoToolbarButton } from "./history-toolbar-button";
import { ImportToolbarButton } from "./import-toolbar-button";
import {
  IndentToolbarButton,
  OutdentToolbarButton,
} from "./indent-toolbar-button";
import { InsertToolbarButton } from "./insert-toolbar-button";
import { LineHeightToolbarButton } from "./line-height-toolbar-button";
import { LinkToolbarButton } from "./link-toolbar-button";
import {
  BulletedListToolbarButton,
  NumberedListToolbarButton,
  TodoListToolbarButton,
} from "./list-toolbar-button";
import { MarkToolbarButton } from "./mark-toolbar-button";
import { MediaToolbarButton } from "./media-toolbar-button";
import { ModeToolbarButton } from "./mode-toolbar-button";
import { MoreToolbarButton } from "./more-toolbar-button";
import { TableToolbarButton } from "./table-toolbar-button";
import { ToggleToolbarButton } from "./toggle-toolbar-button";
import { ToolbarGroup } from "./toolbar";
import { TurnIntoToolbarButton } from "./turn-into-toolbar-button";

export function FixedToolbarButtons() {
  const readOnly = useEditorReadOnly();

  return (
    <div>
      {!readOnly && (
        &lt;&gt;
          &lt;ToolbarGroup&gt;
            &lt;UndoToolbarButton /&gt;
            &lt;RedoToolbarButton /&gt;
          &lt;/ToolbarGroup&gt;

          &lt;ToolbarGroup&gt;
            &lt;AIToolbarButton tooltip="AI commands"&gt;
              &lt;WandSparklesIcon /&gt;
            &lt;/AIToolbarButton&gt;
          &lt;/ToolbarGroup&gt;

          &lt;ToolbarGroup&gt;
            &lt;ExportToolbarButton&gt;
              &lt;ArrowUpToLineIcon /&gt;
            &lt;/ExportToolbarButton&gt;

            &lt;ImportToolbarButton /&gt;
          &lt;/ToolbarGroup&gt;

          &lt;ToolbarGroup&gt;
            &lt;InsertToolbarButton /&gt;
            &lt;TurnIntoToolbarButton /&gt;
            &lt;FontSizeToolbarButton /&gt;
          &lt;/ToolbarGroup&gt;

          &lt;ToolbarGroup&gt;
            &lt;MarkToolbarButton nodeType={KEYS.bold} tooltip="Bold (⌘+B)"&gt;
              &lt;BoldIcon /&gt;
            &lt;/MarkToolbarButton&gt;

            &lt;MarkToolbarButton nodeType={KEYS.italic} tooltip="Italic (⌘+I)"&gt;
              &lt;ItalicIcon /&gt;
            &lt;/MarkToolbarButton&gt;

            &lt;MarkToolbarButton
              nodeType={KEYS.underline}
              tooltip="Underline (⌘+U)"
            &gt;
              &lt;UnderlineIcon /&gt;
            &lt;/MarkToolbarButton&gt;

            &lt;MarkToolbarButton
              nodeType={KEYS.strikethrough}
              tooltip="Strikethrough (⌘+⇧+M)"
            &gt;
              &lt;StrikethroughIcon /&gt;
            &lt;/MarkToolbarButton&gt;

            &lt;MarkToolbarButton nodeType={KEYS.code} tooltip="Code (⌘+E)"&gt;
              &lt;Code2Icon /&gt;
            &lt;/MarkToolbarButton&gt;

            &lt;FontColorToolbarButton nodeType={KEYS.color} tooltip="Text color"&gt;
              &lt;BaselineIcon /&gt;
            &lt;/FontColorToolbarButton&gt;

            &lt;FontColorToolbarButton
              nodeType={KEYS.backgroundColor}
              tooltip="Background color"
            &gt;
              &lt;PaintBucketIcon /&gt;
            &lt;/FontColorToolbarButton&gt;
          &lt;/ToolbarGroup&gt;

          &lt;ToolbarGroup&gt;
            &lt;AlignToolbarButton /&gt;

            &lt;NumberedListToolbarButton /&gt;
            &lt;BulletedListToolbarButton /&gt;
            &lt;TodoListToolbarButton /&gt;
            &lt;ToggleToolbarButton /&gt;
          &lt;/ToolbarGroup&gt;

          &lt;ToolbarGroup&gt;
            &lt;LinkToolbarButton /&gt;
            &lt;TableToolbarButton /&gt;
            &lt;EmojiToolbarButton /&gt;
          &lt;/ToolbarGroup&gt;

          &lt;ToolbarGroup&gt;
            &lt;MediaToolbarButton nodeType={KEYS.img} /&gt;
            &lt;MediaToolbarButton nodeType={KEYS.video} /&gt;
            &lt;MediaToolbarButton nodeType={KEYS.audio} /&gt;
            &lt;MediaToolbarButton nodeType={KEYS.file} /&gt;
          &lt;/ToolbarGroup&gt;

          &lt;ToolbarGroup&gt;
            &lt;LineHeightToolbarButton /&gt;
            &lt;OutdentToolbarButton /&gt;
            &lt;IndentToolbarButton /&gt;
          &lt;/ToolbarGroup&gt;

          &lt;ToolbarGroup&gt;
            &lt;MoreToolbarButton /&gt;
          &lt;/ToolbarGroup&gt;
        &lt;/&gt;
      )}

      <div />

      &lt;ToolbarGroup&gt;
        &lt;MarkToolbarButton nodeType={KEYS.highlight} tooltip="Highlight"&gt;
          &lt;HighlighterIcon /&gt;
        &lt;/MarkToolbarButton&gt;
        &lt;CommentToolbarButton /&gt;
      &lt;/ToolbarGroup&gt;

      &lt;ToolbarGroup&gt;
        &lt;ModeToolbarButton /&gt;
      &lt;/ToolbarGroup&gt;
    </div>
  );
}
